<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>添加学生</title>
    <link type="text/html" rel="icon" href="../../../../image/logo.png">
    <link type="text/css" rel="stylesheet" href="../../../../lib/layui/css/layui.css">
    <script src="../../../../lib/layui/layui.js"></script>
    <script src="../../../../lib/jQuery/jquery-3.7.1.js"></script>
    <script>
        layui.use(function () {
            let form = layui.form;
            let layer = layui.layer;
            layui.sessionData('studentAdd', {key: "isOk", value: false});

            // 自定义验证规则
            form.verify({
                radioCheck: function(value, item) {
                    let name = $(item).attr('name');
                    let type = $(item).attr('type');
                    if (type !== 'radio') {
                        return "错误使用单选框校验规则，请管理员及时修复";
                    }
                    let element = $(item).parents('.layui-form').find("input[name='" + name + "']");
                    let allRadioElement = element.next().find('i.layui-icon'); // 所有的 radio 元素，f12可以看到
                    if(!element.is(':checked') || !value) {
                        // 将颜色改为红色提示必填
                        allRadioElement.css({"color":"#FF5722"});

                        let firstElement = allRadioElement.first();
                        // i.layui-icon 本来是不可聚焦的，为了让它可以聚焦，需要将 tabIndex 设置为 1
                        firstElement.attr("tabIndex", "1");
                        firstElement.focus();

                        // 如果单选框第一个选项失去焦点，则去掉所有单选框选项红色提示
                        firstElement.blur(function() {
                            allRadioElement.css({"color": ""});
                        });

                        return element.parent().prev().text().replaceAll('*', '') + '不能为空';
                    }
                }
            });

            // 定义表单提交事件
            form.on('submit(studentAddSubmit)', function (data) {
                let field = data.field; // 获取表单字段值
                // 此处可执行 Ajax 等操作
                layer.alert(JSON.stringify(field), {title: '添加成功'}, function () {
                    layui.sessionData('studentAdd', {key: "isOk", value: true});
                    let index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
                    parent.layer.close(index); // 再执行关闭
                });
                return false; // 阻止默认 form 跳转
            });
        });
    </script>
</head>
<body>
<form lay-filter="studentAddForm" class="layui-form" action="" style="margin: 20px;">
    <div class="layui-form-item">
        <label class="layui-form-label">姓名<span style="color: red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" name="studentName" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">学号<span style="color: red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" name="studentId" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">性别<span style="color: red">*</span></label>
        <!--注意这里用块状样式-->
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" lay-verify="radioCheck">
            <input type="radio" name="sex" value="女" title="女" lay-verify="radioCheck">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">手机号<span style="color: red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" name="phone" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">卡号<span style="color: red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" name="cardNo" lay-verify="required" autocomplete="off" class="layui-input" style="width: 250px;">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <!--注意这里用块状样式-->
        <div class="layui-input-block">
            <textarea name="remark" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="studentAddSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>
</html>